<template>
  <div style="padding-bottom:1rem;padding-top:1.5rem;">
    <div class="header">
      <TopNav title="RechargeByKfPage.rgcz" show_left="true" back_url="/#/pay_way"></TopNav>
    </div>
    <div>
      <ul class="kf-list" v-if="data">
        <li v-for="(item, index) in data">
          <div>
            <img src="../../static/img/wechat.png" alt="">
          </div>
          <div :id="'wechat_'+index" @click="copyHere('wechat_'+index)" data-clipboard-action="copy" :data-clipboard-text="item">
            {{item}}
          </div>
        </li>
      </ul>
      <ul class="kf-list" v-if="data2">
        <li @click="handleClickKf(item)" v-for="(item, index) in data2">
          <div>
            <img src="../../static/img/kf2.png" alt="">
          </div>
          <div>
            {{item.nickname}}
          </div>
        </li>
      </ul>
      <div class="tips-text" v-html = "recharge_info">
        
        
      </div>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>

import MainNav from "../components/MainNav";
import UserAccountHeader from "../components/UserAccountHeader";
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";
import Vue from 'vue';

//
// Vue.use(new VueSocketIO({
//     debug: false,
//     connection: 'http://localhost:7373/'
// }))

export default {
  name: 'RechargeByKfPage',
    components: {EmptyBox, MainNav,UserAccountHeader,TopNav},
    data () {
    return {
        loading:false,
        data:[],
        data2: [],
        total:0,
        recharge_info:this.$t("PublishPage.qwzjyrgczxxjyfzcwthgzf"),
    }
  },
    methods:{
        getData(){
            let loading = this.$toast.loading();
            this.$axios.get(this.$api_url.get_daichong_wechats).then((res)=>{
                this.data = res.data;
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                loading.hide();
            })
        },
        getData2(){
            let loading = this.$toast.loading();
            this.$axios.get(this.$api_url.get_daichong_kf).then((res)=>{
                //this.data2 = res.data;
                if(res.data.recharge['value']){
                  this.recharge_info = res.data.recharge['value']
                }
                
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                loading.hide();
            })
        },
        handleClickKf(item){
            location.href="/#/kf?id="+item.id+"&nickname="+item.nickname;
        },
        copyHere(elem){
            let clipboard = new this.$clipboard('#'+elem);
            clipboard.on('success', ()=> {
                this.$toast.success(this.$t("PublishPage.fzcg")+this.$t("PublishPage.zzdkwx")+"!");
                setTimeout(()=>{
                    try{
                        let args = {
                            type:'open_wechat',
                            data:''
                        };
                        Ak.postMessage(JSON.stringify(args));
                    } catch (e) {
                        location.href="weixin://";
                    }
                },3000);

            });
            clipboard.on('error', ()=> {
                this.$toast.fail(this.$t('RechargeByKfPage.fzsb'));
            });
        },
    },
    mounted() {
        this.getData();
        this.getData2();
      //
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .nut-tab{
    border:none;
    padding:0;
  }
</style>
<style scoped>
  table{
    border-collapse: collapse;
    width:100%;
  }
  table td{
    border:thin solid #ccc;
    padding:0.5rem;

  }
  .tab-box{
    border:none;
    padding:0;
  }
  .bottom-tips{
    height:2rem;
    line-height:2rem;
  }
  .total-box{
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
  }

  .header{
    background: url(/static/img/profile-bg.png);
    background-size: 100% 100%;
  }

  .kf-list li{
    height: 1.4rem;
    line-height: 1.4rem;
    margin: 0.4rem;
    border: thin solid #ccc;
    border-radius: 0.2rem;
  }
  .kf-list li div{
    float:left;
  }
  .kf-list li div:first-child{
    width:30%;
  }
  .kf-list li div:last-child{
    width:70%;
    text-align: left;
  }
  .kf-list img{
    width:1rem;
  }
  .tips-text{
    padding: 0.3rem;
    font-size: 0.4rem;
    line-height: 0.7rem;
    text-align: left;
    background: #ffa500b5;
    color: #fff;
    width: 90%;
    margin: 0.3rem auto;
    border-radius: 0.3rem;
    border-style: double;
  }
</style>
